<template>
  <div class="main_content">
    <father-title></father-title>
    <div class="contentBox">
      <header-tabs>
        <template slot="tabs">
          <div>
            <div class="select_tab">角色管理</div>
          </div>
        </template>
      </header-tabs>

      <div class="middleBox">
        <search-box @clickSearch="search">
          <template slot="left">
            <Input v-model="searchParams.roleName" placeholder="请输入角色名称"></Input>
          </template>

          <template slot="right">
            <Button v-if="$store.state.perms.includes('sys:role:save')" type="primary" @click="addData">新增</Button>
          </template>
        </search-box>

        <v-table :loading="pageConfig.loading" border :columns="columns" :data="list">
          <template slot-scope="{ row }" slot="operation">
            <Button v-if="$store.state.perms.includes('sys:role:update')" type="primary" size="small" @click="editData(row)">修改</Button>
            <Button v-if="$store.state.perms.includes('sys:role:delete')" class="button_spacing" type="error" size="small" @click="deleteData(row)">删除</Button>
          </template>
        </v-table>

        <v-page :pageConfig="pageConfig" @refresh="getList"></v-page>
      </div>
    </div>
  </div>
</template>

<script>
import {columns, pageConfig} from "./pageConfig";

export default {
  name: 'RoleManage',

  data() {
    return {
      columns,
      pageConfig,
      list: [],
      searchParams: {
        paramKey: null
      },
      modalCTL: {
        show: false,
        loading: true,
        title: ""
      },
    };
  },

  mounted() {
    this.getList(this.pageConfig);
  },

  methods: {
    // 删除数据
    deleteData(data){
      this.$Modal.confirm({
        title: '删除',
        content: `是否删除${data.roleName}？`,
        loading: true,
        onOk: () => {
          this.$api.post('sp/sys/role/delete', [data.roleId]).then((res)=>{
            if(res.data.code === 0){
              this.getList(this.pageConfig);
              this.$Message.success('删除成功');
            }
          }).finally(()=>this.$Modal.remove());
        }
      });
    },

    // 新增数据
    addData(){
      this.$router.push({name: "AddOrEditRole", params: {type_id: 'add'}});
    },

    // 修改数据
    editData(data){
      this.$router.push({name: "AddOrEditRole", params: {type_id: data.roleId}});
    },

    // 获取列表
    getList(page){
      this.pageConfig.loading = true;
      this.$api.get("sp/sys/role/list", {
        params: {
          page: page.pageNow,
          limit: page.pageSize,
          ...this.searchParams,
        }
      }).then((res)=>{
        if(res.data.code === 0){
          this.list = res.data.page.list;
          this.pageConfig.total = res.data.page.totalCount;
        }
      }).finally(()=>{
        this.pageConfig.loading = false;
      });
    },

    // 搜索
    search(){
      this.pageConfig.pageNow = 1;
      this.getList(this.pageConfig);
    },
  }
};
</script>

<style scoped lang="less">
</style>